<template>
  <div class="contra">
    <div class="contra-title">标本信息</div>
    <div class="contra-from" ref="contraTop">
      <div style="font-size: 14px; color: #333333">名称</div>
      <el-input
        v-model="name"
        style="width: 260px; margin-right: 8px; margin-left: 8px"
        placeholder="请输入名称"
      />
      <el-button type="primary" @click="searchClick">查询</el-button>
    </div>
    <div class="icon-case">
      <div @click="addData" class="icon-case-box">
        <img
          src="../../../../../assets/images/add_icon.png"
          style="width: 16px; height: 16px"
          alt=""
          srcset=""
        />
        <div>新增</div>
      </div>
      <div @click="deleteData" class="icon-case-box">
        <img
          src="../../../../../assets/images/del_icon.png"
          style="width: 16px; height: 16px"
          alt=""
          srcset=""
        />
        <div>删除</div>
      </div>
      <div @click="editData" class="icon-case-box">
        <img
          src="../../../../../assets/images/save_icon.png"
          style="width: 16px; height: 16px"
          alt=""
          srcset=""
        />
        <div>保存</div>
      </div>
      <div class="icon-case-box" @click="searchClick">
        <img
          src="../../../../../assets/images/ref_icon.png"
          style="width: 16px; height: 16px"
          alt=""
          srcset=""
        />
        <div>刷新</div>
      </div>
    </div>
    <!-- 表格 -->
    <xinpuTableGrid
    ref="xinpuGrid"
    :loading="loading"
    :tableHeight="tableHeight"
    :tableWidth="tableWidth"
    :columnsData="columns"
    :data="data"
    @updataSelect="updataSelect"
    @selectCheckedChange="selectCheckedChange"
    >
    </xinpuTableGrid>

    <div class="vxe-pageNo" ref="pageNoRef">
        <div>
          <el-button type="primary" @click="searchClick">导出当前页</el-button>
          <el-button type="primary" @click="searchClick">导出所有页</el-button>
        </div>
        <vxe-pager
            v-model:currentPage="pageNo.PageNo"
            v-model:pageSize="pageNo.PageSize"
            :total="pageNo.total"
            @page-change="pageChange"
        >
        </vxe-pager>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import xinpuTableGrid from "@/components/xinpuTableGrid/index.vue";
import Sortable from "sortablejs";
import { ref, onMounted, onBeforeUnmount, reactive, nextTick } from "vue";
import { VxeUI } from "vxe-table";
const name = ref("");
const contraTop = ref("");
const pageNoRef = ref();
const pageNo = ref({
  total: 0,
  PageNo: 1,
  PageSize: 20,
});
const loading = ref(false);
const xinpuGrid = ref(null);
const tableHeight = ref(0);
const tableWidth = ref(0);
const options = ref([[{ code: "myBtn", name: "列调整" }]]);
const columns = ref([
  // { type: "checkbox", width: 48 },
  { field: "bh", title: "编号", width: 100, editRender: { name: "input" } },
  { field: "mc", title: "名称", width: 200, editRender: { name: "input" } },
  { field: "cjfx", title: "cjfx", width: 120, editRender: { name: "input" } },
  { field: "xgr", title: "修改人", width: 120,},
  {
    field: "xgrq",
    title: "修改时间",
    width: 200,
    editRender: {},
    selectName:'dataSelect'
  },
]);
const data = ref([]);
const pageChange = ({ pageSize, currentPage }) => {
  pageNo.value.PageNo = currentPage
  pageNo.value.PageSize = pageSize
  getData()
}
const searchClick = () =>{
    getData()
}
// 获取下拉框里选中的复选框
const selectCheckedChange = (val, column) => {};
// 获取点击的右键菜单的数据
const updataOptions = (data) => {
  console.log(data);
};
// 新增数据
const addData = () => {
    data.value.push({
        bh:"",
        id: '',
        mc:'',
        rybm:'',
        cjfx:'',
        xgr:'系统员',
        saveflag:1
    })
};
// 删除选中的数据
const deleteData = async()=>{
    const item = xinpuGrid.value.getCurrentEvent();
    if(!item){
        ElMessage({
            message: '请选择你要删除的数据',
            type: 'warning',
        })
        return
    }
    if(item.saveflag == 1){
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    }else{
        // const res = await window.xinpuHttpApi('100300',{
        //   'tablename':'B_RYBM',
        //   'key':'bqfl',
        //   'value':item.bh
        // })
        // if(res.Code == -1){
        //   ElMessage.error(res.CodeMsg)
        // }else{
        //   const result = await window.xinpuHttpApi('100179',item)
        //   if(result.CodeMsg && result.CodeMsg.length>0){
        //       ElMessage.error(result.CodeMsg)
        //   }else{
        //       ElMessage({
        //           message: '删除成功',
        //           type: 'success',
        //       })
        //   }
        // }
        const result = await window.xinpuHttpApi('100299',item)
        if(result.CodeMsg && result.CodeMsg.length>0){
            ElMessage.error(result.CodeMsg)
        }else{
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
        }
    }
    getData()
}
// 获取修改的数据
const editData = async(da) => {
    // const result = xinpuGrid.value.getEditData();
    // console.log(result);
    const item = xinpuGrid.value.getCurrentEvent();
    console.log(item);
    if(!item){
        ElMessage({
            message: '请选择你要保存的数据',
            type: 'warning',
        })
        return
    }
    if(item.saveflag == 1){
        const res = await window.xinpuHttpApi('100297',item)
        if(res.CodeMsg && res.CodeMsg.length>0){
            ElMessage.error(res.CodeMsg)
        }else{
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
        }
    }else{
        const res = await window.xinpuHttpApi('100298',item)
        if(res.CodeMsg && res.CodeMsg.length>0){
            ElMessage.error(res.CodeMsg)
        }else{
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
        }
    }
    getData()
};
// 获取删除的数据
const removeTable = (data) => {
  const res = xinpuGrid.value.removeTable();
  console.log(res);
};
const gettableHeight = () => {
  // 这里是屏幕大小变化时需要执行的逻辑
  let screenheight = document.body.clientHeight;
  let screenWidth = document.body.clientWidth - 458;
  console.log(screenheight, screenWidth);
  screenheight =
    screenheight -
    contraTop.value.offsetHeight -
    pageNoRef.value.offsetHeight -
    190;
  tableHeight.value = screenheight;
  tableWidth.value = screenWidth;
  console.log(tableHeight.value, tableWidth.value);
};
// 获取表格数据
const getData = async()=>{
  loading.value = true
  const res = await window.xinpuHttpApi('100296',{
    "MyPaginationDto":{
        PageNo:pageNo.value.PageNo,
        PageSize:pageNo.value.PageSize,
        OrderByname:'bh',
        isDesc:false
    },
    "InParamDXmxx":{
        lsmc:name.value
    }
  })
  if(res && res.ReContent){
    res.ReContent.Content.forEach(v=>{
      v.xgr = '系统员'
      v.saveflag = 0
      if(v.xgrq){
        v.xgrq=/\d{4}-\d{1,2}-\d{1,2}/g.exec(v.xgrq)[0]
      }
    })
    data.value = res.ReContent.Content
    pageNo.value.total = res.ReContent.RecordCount
  }
  console.log(data.value);
  loading.value = false
}
// 下拉框需要修改的数据
const updataSelect = (val, column) => {
  if(data.value[column.rowIndex].saveflag !== 1){
    data.value[column.rowIndex].saveflag = 2
  }
};
// 这是自定义的列头改变的数据
const updatacolumns = (val) => {};
onMounted(() => {
  gettableHeight();
  getData()
});
</script>

<style lang="scss" scoped>
.contra {
  width: 100%;
  border-radius: 4px 4px 4px 4px;
  // border: 1px solid #e0e0e0;
  border-left: none;
  border-right: none;
  height: calc(100vh - 120px);
  overflow: hidden;
  .contra-title {
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
  }
  .contra-from {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    padding: 20px 0px 12px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 12px;
  }
  .icon-case {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    box-sizing: border-box;
    border-left: 1px solid #EBEBEB;
    border-top: 1px solid #EBEBEB;
    border-right: 1px solid #EBEBEB;
    border-radius: 4px 4px 0 0;
    .icon-case-box {
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666666;
      margin-right: 12px;
    }
  }
  .pageNo {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    box-sizing: border-box;
  }
}
.vxe-pageNo {
  padding: 0 10px;
  box-sizing: border-box;
  height: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 1px solid #EBEBEB;
  border-right: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
  border-radius: 0 0 4px 4px;
  // overflow: hidden;
}
</style>
<style>
.sortable-column-demo .vxe-header--row .vxe-header--column.sortable-ghost,
.sortable-column-demo .vxe-header--row .vxe-header--column.sortable-chosen {
  background-color: #dfecfb !important;
}
</style>